<template>
  <!-- 列表页模板 -->
  <div class="list">
    <div class="record-main page-main">
      <!-- 标题栏 -->
      <title-bar
        title="经营中心消息"
        :props="titleBarProps"
      ></title-bar>
      <!-- 搜索框 -->
      <div class="search-item">
        <mu-text-field
          v-model="searchParameter.value"
          style="width: 200px; padding: 5px 0 0 0; margin: 0 12px; display: flex; align-items: center;"
          placeholder="请输入搜索内容"
        ></mu-text-field>
        <mu-button color="primary" textColor="#fff">搜索</mu-button>
      </div>
      <!-- 数据列表 -->
      <div class="record-table table-box">
        <mu-data-table :columns="columns" :loading="loading" :data="list">
          <template slot-scope="scope">
            <td>{{scope.row}}</td>
          </template>
        </mu-data-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination-box">
        <Paging ref="pager" :total="totalPages" @pages="pageChange"></Paging>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      titleBarProps: [
        {
          title: "list",
          iconfont: "icon-icon_goods_add",
          callback: () => {
            this.$router.push({
              path: "/",
              query: {}
            });
          }
        }
      ],
      searchParameter: {},
      loading: false,
      columns: [{ title: "tab-title", align: "left", width: "100" }],
      list: [],
      totalPages: 0,
      page: 1,
      limit: 15
    };
  },
  components: {},
  mounted() {},
  filters: {},
  methods: {
    pageChange(page) {
      this.page = page.page;
      this.limit = page.limit;
    }
  }
};
</script>
<style lang="less" scoped>
.list {
  .record-main {
    padding: 30px;
  }
}
</style>
